<script setup lang="ts">
  import { ref, h } from 'vue';
  import dayjs from 'dayjs';
  import { getGroupApi } from '@/api/group/index';
  import { BasicTable, useTable, TableAction } from '@/components/Table';
  import {
    CaretRightOutlined,
    UserOutlined,
    PlusCircleOutlined,
    CaretDownOutlined,
  } from '@ant-design/icons-vue';
  import TeamUrl from '@/assets/icons/team.png';
  import AcceptModal from './modal/acceptOrderModal.vue';
  import GrabModal from './modal/grabOrderModal.vue';
  import AddUserModal from './modal/AddUserModal.vue';
  import EditUserModal from './modal/editModal.vue';
  import CopyModal from './modal/copyModal.vue';
  import RateEditModel from './modal/rateEditeModel.vue';
  import { useModal } from '@/components/Modal';
  import { Tag } from '@/components/InfoTag';

  const [registerAccept, { openModal, closeModal }] = useModal();
  const [registerGrab, { openModal: openGrabModal, closeModal: closeGrabModal }] = useModal();
  const [registerRateEdit, { openModal: openRateEditModal, closeModal: closeRateEditModal }] =
    useModal();
  const [registerAddUser, { openModal: openAddUserModal }] = useModal();
  const [registerEditUser, { openModal: openEditUserModal }] = useModal();
  const [registerCopy, { openModal: openCopyModal, closeModal: closeCopyModal }] = useModal();

  const columns = [
    {
      title: '序号',
      dataIndex: 'id',
    },
    {
      title: '代理账号',
      dataIndex: 'username',
      align: 'left',
    },
    {
      title: '代理昵称',
      dataIndex: 'nickname',
    },
    {
      title: '团队号/人数',
      dataIndex: 'team',
    },
    {
      title: '代理昵称',
      dataIndex: 'nickname',
    },
    {
      title: '余额',
      dataIndex: 'balance',
    },
    {
      title: '保证金',
      dataIndex: 'freezeMoney',
    },
    {
      title: '账号状态',
      dataIndex: 'status',
    },
    {
      title: '接单状态',
      dataIndex: 'takeOrders',
    },
    {
      title: '抢单状态',
      dataIndex: 'snatchOrders',
    },
    {
      title: '接单数据',
      dataIndex: 'takeCount',
    },
    {
      title: '抢单数据',
      dataIndex: 'snatchCount',
    },
    {
      title: '费率配置',
      dataIndex: 'config',
    },
    {
      title: 'Google状态',
      dataIndex: 'use_google',
    },
    {
      title: '最后登录IP',
      dataIndex: 'last_login_ip',
    },
    {
      title: '最后登录时间',
      dataIndex: 'last_login_time',
    },
    {
      title: '注册时间',
      dataIndex: 'create_time',
    },
    {
      title: '联系方式',
      dataIndex: 'contact',
    },
    {
      title: '操作',
      dataIndex: 'action',
      fixed: 'right',
    },
  ];

  const total = ref(0);
  const amountTotal = ref(0);
  const editAuth = ref(false);
  const loading = ref(false);
  const urlInfo = ref({
    h5_url: '',
    pc_url: '',
    app_download: '',
  });

  const handleEdit = (record) => {
    openEditUserModal(true, record);
    console.log('点击编辑');
  };

  const handleCopy = (record) => {
    openCopyModal(true, { ...record, ...urlInfo.value });
    console.log('点击复制');
  };

  const [register, { getRawDataSource, reload }] = useTable({
    title: '团队管理',
    isTreeTable: true,
    accordion: true, // 手风琴效果
    bordered: true,
    columns: columns,
    api: getGroupApi,
    fetchSetting: {
      listField: 'list',
    },
    afterFetch: () => {
      const data = getRawDataSource();
      total.value = data.total;
      urlInfo.value = {
        h5_url: data.H5,
        pc_url: data.pcDown,
        app_download: data.appDown,
      };
      amountTotal.value = data.amountTotal;
      editAuth.value = data.edit === '0' ? false : true;
    },
    useSearchForm: true,
    formConfig: {
      labelWidth: 120,
      schemas: [
        {
          field: 'status',
          component: 'Select',
          label: '账号状态',
          colProps: {
            span: 6,
          },
          componentProps: {
            options: [
              {
                label: '全部分类',
                value: '',
                key: '',
              },
              {
                label: '开启',
                value: '1',
                key: '1',
              },
              {
                label: '关闭',
                value: '0',
                key: '0',
              },
            ],
          },
        },
        {
          field: 'snatchOrders',
          component: 'Select',
          label: '抢单状态',
          colProps: {
            span: 6,
          },
          componentProps: {
            options: [
              {
                label: '全部分类',
                value: '',
                key: '',
              },
              {
                label: '开启',
                value: '1',
                key: '1',
              },
              {
                label: '关闭',
                value: '0',
                key: '0',
              },
            ],
          },
        },
        {
          field: 'takeOrders',
          component: 'Select',
          label: '接单状态',
          colProps: {
            span: 6,
          },
          componentProps: {
            options: [
              {
                label: '全部分类',
                value: '',
                key: '',
              },
              {
                label: '开启',
                value: '1',
                key: '1',
              },
              {
                label: '关闭',
                value: '0',
                key: '0',
              },
            ],
          },
        },
        {
          field: 'team',
          label: '团队号',
          component: 'Input',
          colProps: {
            span: 6,
          },
          componentProps: {
            placeholder: '请输入团队号',
          },
        },
        {
          field: 'id',
          label: '下级ID',
          component: 'Input',
          colProps: {
            span: 6,
          },
          componentProps: {
            placeholder: '请输入下级ID',
          },
        },
        {
          field: 'username',
          label: '代理账号',
          component: 'Input',
          colProps: {
            span: 6,
          },
          componentProps: {
            placeholder: '请输入代理账号',
          },
        },
      ],
      showAdvancedButton: true,
    },
    rowKey: 'id',
    showSelectionBar: false,
    showTableSetting: true,
    showIndexColumn: true,
    indexColumnProps: { width: 60 },
    indentSize: 22,
    expandIconColumnIndex: 1,
    canResize: true,
    takeCare: '这是注意事项',
  });
</script>
<template>
  <main>
    <a-row :gutter="16">
      <a-col :span="24" style="margin-top: 4px">
        <BasicTable @register="register" :loading="loading">
          <template #toolbar>
            <Tag title="下级总余额" color="red">{{ amountTotal }}</Tag>
            <Tag title="下级总数" color="red">{{ total }}</Tag>
            <a-button
              @click="openAddUserModal(true, reload)"
              size="small"
              type="primary"
              :icon="h(PlusCircleOutlined)"
              >添加下级</a-button
            >
          </template>
          <template #expandIcon="{ record, expanded, onExpand }">
            <span @click="onExpand(record)">
              <CaretRightOutlined
                v-if="record.children && record.children.length > 0 && !expanded"
                style="margin-left: 0; color: rgb(63 187 107); font-size: 22px"
              />
              <CaretDownOutlined
                v-if="record.children && record.children.length > 0 && expanded"
                style="margin-left: 0; color: rgb(63 187 107); font-size: 22px"
              />
              <UserOutlined
                style="margin-left: 2px; font-size: 22px"
                v-if="!record.children || record.children.length < 1"
              />
              <a-avatar v-else :src="TeamUrl" />
            </span>
          </template>
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'status'">
              <a-tag :color="record.status === '1' ? 'green' : ''">{{
                record.status === '1' ? '开启' : '关闭'
              }}</a-tag>
            </template>
            <template v-if="column.key === 'takeOrders'">
              <a-tag :color="record.takeOrders === '1' ? 'green' : ''">{{
                record.takeOrders === '1' ? '开启' : '关闭'
              }}</a-tag>
            </template>
            <template v-if="column.key === 'snatchOrders'">
              <a-tag :color="record.snatchOrders === '1' ? 'green' : ''">{{
                record.snatchOrders === '1' ? '开启' : '关闭'
              }}</a-tag>
            </template>
            <template v-if="column.key === 'balance'"
              ><span style="color: #f50">{{ record.Balance.balance }}</span></template
            >
            <template v-if="column.key === 'freezeMoney'">
              <span style="color: #f50">{{ record.Balance.freezeMoney }}</span></template
            >
            <template v-if="column.key === 'takeCount'">
              <a-button
                @click="openModal(true, { id: record.id })"
                style="background-color: rgb(244 88 9); color: #fff"
                size="small"
                >查看</a-button
              >
            </template>
            <template v-if="column.key === 'snatchCount'">
              <a-button
                @click="openGrabModal(true, { id: record.id })"
                style="background-color: rgb(244 88 9); color: #fff"
                size="small"
                >查看</a-button
              >
            </template>
            <template v-if="column.key === 'config'">
              <a-dropdown placement="bottom">
                <a-button style="background-color: rgb(244 88 9); color: #fff" size="small"
                  >费率配置</a-button
                >
                <template #overlay>
                  <a-menu>
                    <a-menu-item>
                      <a
                        @click="openRateEditModal(true, { id: record.id, type: 0 })"
                        rel="noopener noreferrer"
                      >
                        代收费率
                      </a>
                    </a-menu-item>
                    <a-menu-item>
                      <a
                        @click="openRateEditModal(true, { id: record.id, type: 1 })"
                        rel="noopener noreferrer"
                      >
                        代付费率
                      </a>
                    </a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown>
            </template>
            <template v-if="column.key === 'use_google'">
              <a-tag :color="record.use_google === '1' ? 'green' : ''">{{
                record.use_google === '1' ? '开启' : '关闭'
              }}</a-tag>
            </template>
            <template v-if="column.key === 'last_login_time'">
              {{
                record.last_login_time
                  ? dayjs(record.last_login_time * 1000).format('YYYY-MM-DD hh:mm:ss')
                  : ''
              }}
            </template>
            <template v-if="column.key === 'create_time'">
              {{ dayjs(record.create_time * 1000).format('YYYY-MM-DD hh:mm:ss') }}
            </template>
            <template v-if="column.key === 'action'">
              <TableAction
                :actions="[
                  {
                    label: '修改',
                    onClick: handleEdit.bind(null, record),
                    ifShow: editAuth,
                  },
                  {
                    label: '拷贝信息',
                    onClick: handleCopy.bind(null, record),
                  },
                ]"
              />
            </template>
          </template>
        </BasicTable>
      </a-col>

      <AcceptModal @register="registerAccept" @ok="closeModal" />
      <GrabModal @register="registerGrab" @ok="closeGrabModal" />
      <RateEditModel @register="registerRateEdit" @ok="closeRateEditModal" />
      <AddUserModal @register="registerAddUser" />
      <EditUserModal @register="registerEditUser" @ok="reload" />
      <CopyModal @register="registerCopy" @ok="closeCopyModal" />
    </a-row>
  </main>
</template>
